<template>
  <div class="Category">
    <p class="p">——为你寻找更多宝藏歌单💖</p>
    <van-tabs
      animated
      duration="0.5"
      color="#ec4141"
      title-active-color="#ec4141"
      v-model="activeName"
      @click="getinfo(activeName)"
    >
      <van-tab
        v-for="(item, index) in hotcate"
        :key="index"
        :title="item.name"
        :name="item.name"
      >
        <van-row type="flex" justify="space-around">
          <van-col
            span="11"
            v-for="(item, index) in catemusic"
            :key="index"
            @click="getList(item.id, item.name)"
            class="cate"
          >
            <van-image
              fit="cover"
              width="4.36rem"
              height="4.36rem"
              class="imgradius"
              :src="item.coverImgUrl"
            />
            <p id="ph">{{ item.name }}</p>
            <p class="time">
              <van-icon name="clock-o" class="timeicon" />{{
                item.trackNumberUpdateTime | dateFormat
              }}
            </p>
            <van-tag round type="primary" class="palycount">
              <van-icon name="audio" sieze="10px" />{{
                item.playCount | changenum
              }}
            </van-tag>
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";
import { _dateFormat } from "@/api/dateFormat";
export default {
  data() {
    return {
      cateid: "",
      hotcate: "",
      activeName: "",
      catemusic: "",
    };
  },
  created() {
    axios({
      url: "/playlist/catlist",
    }).then((res) => {
      this.hotcate = res.data.sub;
    });
    this.getinfo();
  },
  methods: {
    getinfo(activeName) {
      console.log(activeName);
      // 获取分类歌单详情
      axios({
        url: "/top/playlist",
        params: {
          // id: activeName,
          cat: activeName,
          limit: 8,
        },
      }).then((res) => {
        this.catemusic = res.data.playlists;
      });
    },
    getList(id) {
      // console.log(id);
      this.$router.push({
        path: "/MusicSheetList",
        query: {
          id: id,
        },
      });
    },
  },
  filters: {
    changenum(num) {
      if (num >= 100000000) {
        num = Math.round(num / 10000000) / 10 + "亿";
      } else if (num >= 10000) {
        num = Math.round(num / 1000) / 10 + "万";
      }
      return num;
    },
    //格式化后台传过来的时间戳
    dateFormat(time) {
      let date = new Date(time);
      return _dateFormat(date, "yyyy/MM/dd hh:mm");
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.Category {
  margin-bottom: 50px;
  background: white;
}
.cate {
  padding: 3px;
  margin-top: 8px;
  position: relative;
  background: white;
}
.palycount {
  position: absolute;
  right: 5px;
  top: 7px;
  background: #ec4141;
  font-size: 0.3rem;
}
.time {
  margin-top: 3px;
  font-size: 5px;
  color: #585353;
}
.timeicon {
  position: relative;
  top: 2px;
  margin-right: 3px;
}
h4 {
  margin-top: 1px;
  margin-right: 300px;
}
.p {
  font-size: 10px;
  margin-left: 230px;
}
#ph {
  font-size: 0.28rem;
}
</style>